<template>
	<div style="text-align: center">
		<div v-if="options" style="position: relative; padding: 20px">
			<div v-qr="options" class="qrcode"></div>
			<div>{{ wxTXT }}</div>
			<div v-if="coverFlag">
				<div
					style="
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						filter: alpha(opacity=40);
						-moz-opacity: 0.4;
						-khtml-opacity: 0.4;
						opacity: 0.4;
						background: #000;
						border-radius: 5px;
						-webkit-box-shadow: 0 0 5px #ddd;
						box-shadow: 0 0 5px #000;
					"
				></div>
				<div style="position: absolute; left: 40%; top: 40%">
					<a-button @click="getWeixin()"> 刷新二维码 </a-button>
				</div>
			</div>
		</div>
		<div v-else>二维码初始化中，请稍后</div>
		<!-- <div style="margin-top: 20px;">
      <router-link to="/login/week">
        <a-button>
          切换验证码登录系统 >>>
        </a-button>
      </router-link>
    </div> -->
	</div>
</template>

<script>
	import mqttObj from "@/utils/mqtt"
	import login from "@/api/login"

	export default {
		data() {
			return {
				uuidKey: "uuid",
				options: "",
				wxTXT: "请使用微信扫一扫登录",
				id: 0,
				mqtt: {},
				coverFlag: false,
			}
		},
		mounted() {
			if (this.$func.isWeiXin()) {
				this.$message.info("页面跳转中.....")
				window.location = this.$http.URL + "/mobile/weixin/login"
				return
			}

			mqttObj.leave = false
			this.getWeixin()
		},
		destroyed: function () {
			mqttObj.leave = true
			mqttObj.close()
		},
		methods: {
			connectWebsocket() {
				if (mqttObj.leave) {
					return
				}
				if (mqttObj.client.connected) {
					return
				}

				const subscribeMap = {}
				subscribeMap[this.mqtt.subscribe] = (topic, message) => {
					let response = {}
					try {
						response = JSON.parse(message)
					} catch (error) {
						return
					}
					if (response && response["action"] == "close") {
						console.log("close ..............")
						mqttObj.close()
						this.getWeixin()
						return
					}

					this.wxTXT = response["check_msg"]
					let open_id = "",
						id = 0,
						access_token = "",
						refresh_token = ""
					if (Object.prototype.hasOwnProperty.call(response, "open_id")) {
						open_id = response["open_id"]
					}
					if (
						Object.prototype.hasOwnProperty.call(response, "id") &&
						!isNaN(response["id"]) &&
						response["id"] * 1 > 0
					) {
						id = response["id"] * 1
					}
					if (Object.prototype.hasOwnProperty.call(response, "access_token")) {
						access_token = response["access_token"]
					}
					if (Object.prototype.hasOwnProperty.call(response, "refresh_token")) {
						refresh_token = response["refresh_token"]
					}

					if (open_id != "") {
						if (id > 0) {
							this.$token.set(access_token, refresh_token)
							this.$emit("ok")
						} else {
							this.$router.to("/login/binding")
						}
					}
				}
				subscribeMap["close"] = () => {
					this.coverFlag = true
					console.log("close")
				}

				mqttObj.host = this.mqtt.host
				mqttObj.options.clientId = this.mqtt.client_id
				mqttObj.options.username = this.mqtt.username
				mqttObj.options.password = this.mqtt.password
				mqttObj.timeout.topic = this.mqtt.publish
				mqttObj.timeout.message = "I am alive"
				mqttObj.connect(subscribeMap)
			},
			getWeixin: function () {
				login.weixin().then((response) => {
					if (response.code !== 1) {
						this.$message.error(response.message)
						return
					}
					this.coverFlag = false

					this.id = response.data.weixin_id
					this.wxTXT = response.data.check_msg
					this.mqtt = response.data.mqtt
					this.options = {
						text:
							this.$http.URL + "/login/weixin/mobile/" + this.$token.getUUID(),
						render: "canvas",
						width: 220,
						height: 220,
						typeNumber: -1,
						correctLevel: 2,
						background: "#ffffff",
						foreground: "#000000",
					}
					this.connectWebsocket()
				})
				// .catch(() => {
				//   this.$router.to("/login/week")
				// })
			},
		},
	}
</script>

<style lang="less" type="text/less" scoped></style>
